<script setup>
import { useRouter } from "vue-router";
import { ref,onBeforeMount} from "vue";
import requestUnit, {getServerUrl} from "@/utils/request.js";
import Cookies from "js-cookie";
let router = useRouter();
let foodList = ref([]);
const getFoodList = async () => {
  let res = await requestUnit.get("/app/loadStarStore/",{userId:Cookies.get("userId")});
  foodList.value = res.data.data;
};
onBeforeMount(()=>{
  getFoodList();
  getImage();
})
const getImage = () => {
  return getServerUrl()+'media/store/';
}
const onClickLeft = () => {
  router.push({
    path: "/my"
  });
};
const jump = id => {
  router.push({
    path: "/storeDetails",
    query: {
      id: id
    }
  });
};
</script>

<template>
  <div class="mystarstore">
    <van-nav-bar title="我关注的店铺" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="show" v-for="(item,index) in foodList">
      <div class="show-item" @click="jump(item.id)">
        <div class="img">
          <img :src="getImage()+item.img" />
        </div>
        <div class="text">
          <h3>{{ item.name }}</h3>
          <div class="rate">
            <van-rate 
            v-model="item.rate"
              color="#FFBA20"
              void-icon="star"
              void-color="#eee"
              readonly allow-half />
            <div class="pf">{{ item.rate }}</div>
            <div class="sale">月售{{ item.sale }}</div>
          </div>

          <div class="price">
            <span class="span1">起送￥{{ item.price1 }} |</span>
            <span class="span2">配送￥{{ item.price2 }}</span>
          </div>
        </div>
        <div class="distance">
          <span>{{ item.distance }}km</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.show-item .img img {
  width: 200px;
}

.show-item {
  position: relative;
  padding: 20px;
  width: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
  border-bottom: 0.5px solid #ececec;
}
.show-item .text {
  width: 90%;
  margin-left: 22px;
}
.show-item .text h3 {
  position: relative;
  top: -15px;
  font-size: 32px;
  font-weight: normal;
}

.show-item .text .rate .sale {
  color: #333333;
  margin-left: 22px;
}
.show-item .text .rate .pf {
  padding-left: 10px;
  position: relative;
  top: 1.7px;
}
.show-item .text .rate {
  display: flex;
  align-items: center;
  justify-content: left;
  padding-bottom: 5px;
  font-size: 24px;
}

.show-item .text .price {
  color: #666666;
  font-size: 24px;
}
.show-item .distance span {
  display: inline-block;
  position: relative;
  top: -50px;
}
</style>